<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- 定义项目路径   url标签可以  -->
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伊翔分销平台-注册</title>

<style type="text/css">
*{
	margin:0;
	padding:0;
}
.u_logo{margin: 12px 0 24px;}
.u_logo a{}
.u_logo a img{ border:0;}
.mod-breadBox{
	width:100%;
	height:60px;
	background: #34c0e3;
}
.mod-bread {width:1300px;height: 60px;margin:0 auto;color:white;line-height:60px;}
.mod-bread .bread-left {float: left;font-size: 14px;font-weight: bold;height: 60px;text-align: right;width: 137px;}
.mod-bread .bread-right {float: right;height: 60px;padding-right: 20px;}
.orange{
	color:#f3f820;
}
/*内容区*/
.user_form{
	width:400px;
	min-height:560px;
	margin:0 auto;
	font-size:12px;
	margin-top:50px;
}
.licenseImg{
	padding-left:10px;
}
</style>
<link href="${ctx }/jslib/layui/css/layui.css" rel="stylesheet" type="text/css" />
<!-- 引入jQuery -->
<script src="${ctx}/jslib/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入layer -->
<script src="${ctx}/jslib/layer/layer.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入EasyUI -->
<link id="easyuiTheme" rel="stylesheet" href="${ctx}/jslib/easyui1.3.3/themes/<c:out value="${cookie.easyuiThemeName.value}" default="default"/>/easyui.css" type="text/css">
<link id="easyuiTheme" rel="stylesheet" href="${ctx}/jslib/easyui1.3.3/themes/icon.css" type="text/css">
<script type="text/javascript" src="${ctx}/jslib/easyui1.3.3/jquery.easyui.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctx}/jslib/easyui1.3.3/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
<!-- 扩展Jquery -->
<script type="text/javascript" src="${ctx}/jslib/extJquery.js" charset="utf-8"></script>

<link href="${ctx }/jslib/regvalid/main.css" rel="stylesheet" type="text/css" />
<!--必要样式-->
<link href="${ctx }/jslib/regvalid/user_form.css" rel="stylesheet" type="text/css" />
<script src="${ctx }/jslib/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctx }/jslib/cityselect/js/jquery.cityselect.js"></script>
<script src="${ctx }/jslib/regvalid/formValidator-4.1.1.js" type="text/javascript"></script>
<script src="${ctx }/jslib/regvalid/formValidatorRegex.js" type="text/javascript"></script>
 <script type="text/javascript">
$(document).ready(function(){
	$("#city_3").citySelect({nodata:"none",required:false});
	$.formValidator.initConfig({theme:"baidu",mode:"AutoTip",submitOnce:true,formID:"user_form_0",
		submitAfterAjaxPrompt : '有数据正在异步验证，请稍等...'
	});
	$("#username").formValidator({onShowText:"请输入用户名",onFocus:"6~12个字符，包括字母、数字、下划线，以字母开头，字母或数字结尾",onCorrect:"该用户名可以注册",tipCss:{height:36,width:460}}).inputValidator({min:6,max:12,onError:"你输入的用户长度不正确,请确认"}).regexValidator({regExp:"username",dataType:"enum",onError:"用户名格式不正确"})
	    .ajaxValidator({
		dataType : "json",
		async : true,
		url : "${ctx}/user/checkUser",
		success : function(data){
            if( data.success) return true;
            if( !data.success) return false;
			return false;
		},
		buttons: $("#user_submit"),
		error: function(jqXHR, textStatus, errorThrown){alert("服务器没有返回数据，可能服务器忙，请重试"+errorThrown);},
		onError : "该用户名不可用，请更换用户名",
		onWait : "正在进行合法性校验，请稍候..."
	});

	$("#nickname").formValidator({onShowText:"请输入昵称",onFocus:"必须为汉字、英文字母、数字、不包含特殊字符",onCorrect:"输入正确",tipCss:{height:36,width:320}}).inputValidator({min:1,max:20,onError:"输入的长度不正确"}).regexValidator({regExp:"company",dataType:"enum",onError:"格式不正确"});
	$("#company").formValidator({onShowText:"请输入公司名称",onFocus:"必须为汉字、英文字母、数字、不包含特殊字符",onCorrect:"输入正确",tipCss:{height:36,width:320}}).inputValidator({min:1,max:200,onError:"输入的长度不正确"}).regexValidator({regExp:"company",dataType:"enum",onError:"格式不正确"});
	$("#location").formValidator({onShowText:"请输入地址",onFocus:"必须为汉字、英文字母、数字、不包含特殊字符",onCorrect:"输入正确",tipCss:{height:36,width:320}}).inputValidator({min:1,max:200,onError:"输入的长度不正确"}).regexValidator({regExp:"company",dataType:"enum",onError:"格式不正确"});
	$("#contacts").formValidator({onShowText:"请输入真实姓名",onFocus:"请输入真实姓名",onCorrect:"输入正确",tipCss:{height:36,width:320}}).inputValidator({min:1,max:50,onError:"输入的长度不正确"}).regexValidator({regExp:"company",dataType:"enum",onError:"格式不正确"});
	$("#mobile").formValidator({onShowText:"请输入联系人手机",onFocus:"请输入手机号方便找回密码",onCorrect:"输入正确",tipCss:{height:36,width:320}}).inputValidator({min:1,max:50,onError:"输入的长度不正确"}).regexValidator({regExp:"mobile",dataType:"enum",onError:"格式不正确"});
	$("#city").formValidator({onShowText:"请选择市区",onFocus:"请选择市区",onCorrect:"输入正确",tipCss:{height:36,width:320}}).inputValidator({min:1,max:1000,onError:"你没有选择市区"});

	$("#mail").formValidator({onShowText:"请输入邮箱",onFocus:"请输入常用邮箱，通过验证后可用于登陆和找回密码",defaultValue:"@",tipCss:{height:36,width:320}}).inputValidator({min:6,max:60,onError:"请输入邮箱"}).regexValidator({regExp:"email",dataType:"enum",onError:"邮箱格式不正确"});
	$("#pwd").formValidator({onEmpty:"请输入密码",onFocus:"6~16个字符，包括字母、数字、特殊符号，区分大小写",tipCss:{height:68,width:320}}).inputValidator({min:6,max:16,empty:{leftEmpty:false,rightEmpty:false,emptyError:"密码两边不能有空符号"},onError:"密码长度错误,请确认"}).passwordValidator({compareID:"username"});
	$("#pwd2").formValidator({onEmpty:"请输入确认密码",onFocus:"请输入确认密码",tipCss:{height:36,width:320}}).inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"重复密码两边不能有空符号"},onError:"重复密码不能为空,请确认"}).compareValidator({desID:"pwd",operateor:"=",onError:"2次密码不一致,请确认"});

	$("#bankName").formValidator({onShowText:"请输入银行名称",onFocus:"必须为汉字、英文字母、数字、不包含特殊字符",onCorrect:"输入正确",tipCss:{height:36,width:320}}).inputValidator({min:1,max:100,onError:"输入的长度不正确"}).regexValidator({regExp:"company",dataType:"enum",onError:"格式不正确"});
	$("#bankCard").formValidator({onShowText:"请输入银行卡号",onFocus:"必须为数字",onCorrect:"输入正确",tipCss:{height:36,width:320}}).inputValidator({min:16,max:19,onError:"输入的长度不正确"}).regexValidator({regExp:"bankcard",dataType:"enum",onError:"格式不正确"});
	$("#bankUser").formValidator({onShowText:"请输入持卡人名称",onFocus:"必须为汉字、英文字母、数字、不包含特殊字符",onCorrect:"输入正确",tipCss:{height:36,width:320}}).inputValidator({min:1,max:20,onError:"输入的长度不正确"}).regexValidator({regExp:"company",dataType:"enum",onError:"格式不正确"});

    $("#verifycode").formValidator({onShowText:"请输入验证码",onFocus:"请输入图片中的字符，不分区大小写",onEmpty:"请输入验证码",tipCss:{left:194,height:36,width:320}}).inputValidator({min:1,onError:"请输入验证码"})
    .ajaxValidator({
		dataType : "json",
		async : true,
		url : "${ctx}/checkCode",
		success : function(data){
            if( data.success) return true;
            if( !data.success) return false;
			return false;
		},
		buttons: $("#user_submit"),
		error: function(jqXHR, textStatus, errorThrown){alert("服务器没有返回数据，可能服务器忙，请重试"+errorThrown);},
		onError : "验证码输入有误",
		onWait : "正在进行合法性校验，请稍候..."
	});
    $("#zzPath").formValidator({onShowText:"请上传营业执照",onFocus:"必须上传营业执照",onCorrect:"附件正确",tipCss:{height:36,width:320}});

	$.formValidator.reloadAutoTip();
	$("#user_change_verifycode_0").click(function(){
		 $('#pass_reg_img_verifycode_0').hide().attr('src', '${ctx }/code?' + Math.floor(Math.random()*100) ).fadeIn();
	});
	  var ajaxFormOption = {
           type: "post",  //提交方式
           dataType: "json", //数据类型
           url: "${ctx}/user/reg", //请求url
           success: function (data) { //提交成功的回调函数
        	  progressClose();
           	  if(data.success){
           		layer.alert('用户注册成功！',{skin:'layui-layer-lan',title: ['系统提示', 'background-color:#00B2EE; color:#fff;'],closeBtn: 0}, function(index){
        		  	$("#user_form_0")[0].reset();
        		  	window.location.href = "${ctx}/admin/index";
				    layer.close(index);
				});
           	  }else{
           		layer.alert(data.msg,{skin:'layui-layer-lan',title: ['系统提示', 'background-color:#00B2EE; color:#fff;'],closeBtn: 0}, function(index){
				    layer.close(index);
				});
           	  }
           },
           error:function(){
        	   progressClose();
			   $("#user_submit").attr("disabled",false);
			   layer.alert("网络连接有误，请稍后再试！");
           }
       };
	  //不需要submit按钮，可以是任何元素的click事件
       $("#user_submit").click(function () {
    	   if(!$("#zzPath").val()){
    		   layer.msg('营业执照必须上传');
    	   }
    	   var temp = $.formValidator.pageIsValid("1");
    	   if(temp){
    		   progressLoad();
    		   $("#user_form_0").ajaxSubmit(ajaxFormOption);
    	   }
           return false;
       });
});
</script>
</head>

<body width="100%">
<div class="mod-breadBox">
	<div class="mod-bread clearfix">
		<div class="div">
			<div class="bread-left"> 填写注册信息 </div>
	    	<div class="bread-right"> 已有帐号？<a id="login" class="orange" href="${ctx }/admin/index">马上登录</a></div>
		</div>
	</div>
</div>


<div class="div">
	<form id="user_form_0" class="user_form" method="post">
		<p>
			<label id="label_username" for="username">用户名</label>
			<input id="username" class="user_input" type="text" name="username" >
		</p>
		
		<p>
			<label id="label_username" for="username">昵称</label>
			<input id="nickname" class="user_input" type="text" name="nickname" >
		</p>
		
		<p>
			<label id="label_password_0" for="password_0">密码</label>
			<input id="pwd" class="user_input" type="password" name="pwd">
		</p>
		
		<p>
			<label id="label_password_1" for="password_1">确认密码</label>
			<input id="pwd2" class="user_input" type="password" name="pwd2">
		</p>
		
		<p>
			<label id="label_company" for="company">公司名称</label>
			<input id="company" class="user_input" type="text" name="company">
		</p>
		
		<p id="city_3">
			<label id="label_city" for="">公司位置</label>
			<select id="prov" name="prov" class="prov"></select> 
			<select id="city" name="city" class="city"></select>
		</p>
		
		<p>
			<label id="label_city" for="location">具体地址</label>
			<input id="location" class="user_input" type="text" name="location">
		</p>
		
		<p>
			<label id="label_city" for="contacts">联系人</label>
			<input id="contacts" class="user_input" type="text" name="contacts">
		</p>
		
		
		<p>
			<label id="label_city" for="mobile">手机</label>
			<input id="mobile" class="user_input" type="text" name="mobile">
		</p>
		
		<p>
			<label id="label_city" for="telphone">公司电话</label>
			<input id="telphone" class="user_input" type="text" name="telphone">
		</p>
		
		<p>
			<label id="label_mail" for="mail">邮箱</label>
			<input id="mail" class="user_input" type="text" name="mail">
		</p>
		
		<p>
			<label id="label_mail" for="mail">开户银行</label>
			<input id="bankName" class="user_input" type="text" name="bankName">
		</p>
		
		<p>
			<label id="label_mail" for="mail">卡号</label>
			<input id="bankCard" class="user_input" type="text" name="bankCard">
		</p>
		
		<p>
			<label id="label_mail" for="mail">持卡人</label>
			<input id="bankUser" class="user_input" type="text" name="bankUser">
		</p>
		
		<p class="user_p_verifycode">
			<label id="label_verifycode" for="verifycode">验证码</label>
			<input id="verifycode" class="user_input" style="width:80px;border:radius;height:26px;margin-right:13px" type="text" name="verifycode"/>
			<img src="${ctx }/code" class="user_verifycode" id="pass_reg_img_verifycode_0" alt="验证码图片" title="验证码图片"/>
			<span class="user_change_verifycode" id="user_change_verifycode_0">看不清？</span>
		</p>
		<input type="hidden" value="" name="zzPath" id="zzPath"/>
	</form>
	<p class="licenseImg">
		<label id="label_zzfile">营业执照图片</label> 
		&nbsp;&nbsp;&nbsp;<input type="file" name="file" class="layui-upload-file" lay-title="添加文件"> 
		<br/>
		<span id="uptip"></span><span id="successText" style="color:#67ccea"></span>
	</p>
	<div class="clear"></div>
	<p style="width:118px;margin:0 auto;">
		<input name="提交" type="button" class="mynewBtn" id="user_submit"  value="注册">
	</p>
</div>
<script src="${ctx }/jslib/layui/layui.js" charset="utf-8"></script>
<script>
layui.use('upload', function(){
  layui.upload({
    url: '${ctx}/file/uploadRegPic'
    ,method: 'post' //上传接口的http类型
   	,ext: 'jpg|png|jpeg' 
    ,success: function(res){
    	$("#zzPath").val(res.data.src);
    	$("#uptip").html(res.data.name);
    	$("#successText").html("上传成功！");
    }
  });
});
</script>
</body>
</html>
